import React, { useState, useEffect } from 'react'
import {
	useHistory,
	useLocation,
	useParams,
	useRouteMatch,
} from 'react-router-dom'
import styles from './Header.module.css'
import logo from '../../assets/logo.svg'
import { Layout, Typography, Input, Menu, Button, Dropdown } from 'antd'
import { GlobalOutlined } from '@ant-design/icons'
import { useSelector } from '../../redux/hooks'
import { useDispatch } from 'react-redux'
import { Dispatch } from 'redux'
import {
	LanguageActionTypes,
	addLanguageActionsCreate,
	changeLanguageActionCreate,
} from '../../redux/language/languageActions'
import { useTranslation } from 'react-i18next'
import jwt_decode, { JwtPayload as DefaultJwtPayload } from 'jwt-decode'
import { userSlice } from '../../redux/user/slice'

interface JwtPayload extends DefaultJwtPayload {
	username: string
}

export const Header: React.FC = () => {
	const history = useHistory()
	const location = useLocation()
	const params = useParams()
	const match = useRouteMatch()
	const language = useSelector((state) => state.language.language)
	const languageList = useSelector((state) => state.language.languageList)
	const dispatch = useDispatch()
	// const dispatch = useDispatch<Dispatch<LanguageActionTypes>>()
	const { t } = useTranslation()

	// token 验证
	const jwt = useSelector((s) => s.user.token)
	const [username, setUsername] = useState('')
	useEffect(() => {
		if (jwt) {
			// const  token = jwt_decode<JwtPayload>(jwt)
			// setUsername(jwt.token.username)
			setUsername(jwt)
		}
	}, [jwt])

	const handleMenuClick = (e) => {
		if (e.key === 'new') {
			dispatch(addLanguageActionsCreate('新语言', 'new_lang'))
		} else {
			dispatch(changeLanguageActionCreate(e.key))
		}
	}
	const onLogout = () => {
		// 清除 redux stroe 中token数据
		dispatch(userSlice.actions.logOut())
		history.push('/')
	}
	return (
		<div className={styles['app-header']}>
			{/* top-header */}
			<div className={styles['top-header']}>
				<div className={styles.inner}>
					<Typography.Text>{t('header.slogan')}</Typography.Text>
					<Dropdown.Button
						style={{ marginLeft: 15 }}
						overlay={
							<Menu onClick={handleMenuClick}>
								{languageList.map((l) => {
									return <Menu.Item key={l.code}>{l.name}</Menu.Item>
								})}
								<Menu.Item key={'new'}>
									{t('header.add_new_language')}
								</Menu.Item>
							</Menu>
						}
						icon={<GlobalOutlined />}
					>
						{language === 'zh' ? '中文' : 'English'}
					</Dropdown.Button>
					{jwt ? (
						<Button.Group className={styles['button-group']}>
							<span>
								{t('header.welcome')}
								<Typography.Text strong>{username}</Typography.Text>
							</span>
							<Button onClick={() => history.push('/shoppingCart')}>
								{t('header.shoppingCart')}
							</Button>
							<Button onClick={onLogout}>{t('header.signOut')}</Button>
						</Button.Group>
					) : (
						<Button.Group className={styles['button-group']}>
							<Button onClick={() => history.push('/register')}>
								{t('header.register')}
							</Button>
							<Button onClick={() => history.push('/signIn')}>
								{t('header.signin')}
							</Button>
						</Button.Group>
					)}
				</div>
			</div>
			<Layout.Header className={styles['main-header']}>
				<span onClick={() => history.push('/')}>
					<img src={logo} alt="logo" className={styles['App-logo']} />
					<Typography.Title level={3} className={styles.title}>
						{t('header.title')}
					</Typography.Title>
				</span>
				<Input.Search
					placeholder={'请输入旅游目的地、主题、或关键字'}
					className={styles['search-input']}
					onSearch={(keyword) => history.push('/search/' + keyword)}
				/>
			</Layout.Header>
			<Menu mode={'horizontal'} className={styles['main-menu']}>
				<Menu.Item key="1"> {t('header.home_page')} </Menu.Item>
				<Menu.Item key="2"> {t('header.weekend')} </Menu.Item>
				<Menu.Item key="3"> {t('header.group')} </Menu.Item>
				<Menu.Item key="4"> {t('header.backpack')} </Menu.Item>
				<Menu.Item key="5"> {t('header.private')} </Menu.Item>
				<Menu.Item key="6"> {t('header.cruise')} </Menu.Item>
				<Menu.Item key="7"> {t('header.hotel')} </Menu.Item>
				<Menu.Item key="8"> {t('header.local')} </Menu.Item>
				<Menu.Item key="9"> {t('header.theme')} </Menu.Item>
				<Menu.Item key="10"> {t('header.custom')} </Menu.Item>
				<Menu.Item key="11"> {t('header.study')} </Menu.Item>
				<Menu.Item key="12"> {t('header.visa')} </Menu.Item>
				<Menu.Item key="13"> {t('header.enterprise')} </Menu.Item>
				<Menu.Item key="14"> {t('header.high_end')} </Menu.Item>
				<Menu.Item key="15"> {t('header.outdoor')} </Menu.Item>
				<Menu.Item key="16"> {t('header.insurance')} </Menu.Item>
			</Menu>
		</div>
	)
}
